<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例_计算属性语法实现</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        计算属性：
            1、定义：要用的属性不存在，需要通过已有属性计算得来
            2、原理：底层借助了Object.defineproperty方法提供的getter和setter
            3、get函数什么时候执行？
                (1).初次读取时会执行一次
                (2).当依赖的数据发生改变时会被再次调用
            4、优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
            5、备注：
                    1、计算属性最终会出现在vm身上，直接使用读取即可
                    2、如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化

     -->


    <!-- 
        1、只要data中的数据发生变化，Vue一定会重新解析模板
        2、vm._data 就是data对象中的值
        3、插值表达式  读取computed对象中的属性值 根据属性名读取 --{{fullName}}
     -->

    <!--准备好一个容器-->
    <div id="root">
        <!-- value可以设置初始值
             value中的初始值想使用data中属性值  需要使用指令语法 进行(单向/双向)数据绑定 -->
        姓：<input type="text" v-model="firstName"><br/><br/>
        名：<input type="text" v-model="lastName"><br/><br/>
        <!-- {{fullName}}--将函数展示在页面上  
             {{fullName()}}--将fullName函数中的返回值插入到插值表达式中
         -->
        全名：<span>{{fullName}}</span><br/><br/>
        <!-- 全名：<span>{{fullName}}</span><br/><br/> 
        全名：<span>{{fullName}}</span><br/><br/>
        全名：<span>{{fullName}}</span> -->
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
    // 准备一个Vue实例
   const vm =  new Vue({
        el:'#root',
        data:{
            firstName:'南', // vm._data时 只有firstName、lastName属性 没有计算属性fullName
            lastName:'风'
        },
       computed:{ // computed该配置项中负责计算属性，计算属性要配置成一个对象的形式，进行配置
            fullName:{              
                /* 
                    1、get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                    2、get什么时候调用？
                        1、初次读取fullName时，会被调用
                        2、所依赖的数据发生变化时
                 */
                get(){   // get底层已经帮我们做好了this(当前对象)指向vm
                    console.log('get被调用了');
                    console.log(this);  // 此处的this就是vm
                    return this.firstName + '-' + this.lastName  // fullName依赖的数据是firstName、lastName，当其中任何一个属性发生改变时，get就会被重新调用           
                },
                // set什么时候调用？当fullName被修改的时候
                set(value){
                    console.log('fullName被修改了，修改的值时',value);
                    const arr = value.split('-') // 按照 -对字符串进行分割 存进数组
                    this.firstName = arr[0] // 对计算属性依赖的属性进行改变
                    this.lastName = arr[1]
                }
            }
       }
    })
</script>
</html>
